•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
r3 vs r4
......
123123||
124124||<-2> 모서리 곡률 지정 || {{{border-radius=픽셀}}} ||이미지 파일의 모서리 곡률을 지정할 수 있는 문법입니다. ||
125125||<-2> 픽셀화 || {{{rendering=pixelated}}} ||비트맵 이미지는 자동으로 [[안티에일리어싱]]이 적용되어 나오는데, 이를 적용되지 않게 해 줍니다. 픽셀의 수가 적은 비트맵 이미지를 확대하면 이 [[안티에일리어싱]]으로 인해 이미지가 흐리게 나오는데, 이를 선명하게 표시하여야 할 때 유용한 속성입니다. ||
126||<-2><|5> 크기 맞춤 || {{{object-fit=fill}}} ||{{{#!wiki style="display: flex"
127{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
128[[파일:로고1.png|width=120&height=120&object-fit=fill]]
129}}} {{{#!wiki style="margin-top: -15px"
130{{{원본: 200x100
131매개변수: width=120&height=120&object-fit=fill
132}}} 지정된 너비와 높이에 맞게 이미지가 늘려서 조절됩니다. 이미지가 왜곡될 수 있습니다. 기본값입니다. svg 파일은 {{{object-fit=contain}}}으로 표시됩니다.}}}}}} ||
133|| {{{object-fit=contain}}} ||{{{#!wiki style="display: flex"
134{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
135[[파일:로고1.png|width=120&height=120&object-fit=contain]]
136}}} {{{#!wiki style="margin-top: -15px"
137{{{원본: 200x100
138매개변수: width=120&height=120&object-fit=contain
139}}} 이미지의 원본 비율을 유지하면서 지정된 너비와 높이 내에 포함되도록 조절됩니다. 여백이 생길 수 있습니다.}}}}}} ||
127}}}
128모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다.
129{{{||<width=숫자>[[파일:example.png|width=100%]]||
130}}}
131이렇게 하면 PC에선 적절한 너비로 볼 수 있고, 모바일에선 화면 크기에 맞춘 이미지를 볼 수 있으며, 아래에 이미지가 있다면 적절한 간격으로 떨어지는 효과를 볼 수 있습니다. 추가로 {{{<tablealign=center / right>}}}를 사용해 이미지의 위치도 지정할 수 있게 됩니다. 틀의 배경이 불편하다면 다음과 같이 사용할 수 있습니다.
132{{{||<width=숫자><nopad>[[파일:example.png|width=100%]]||
133}}}이렇게 하면 틀의 배경이 보이지 않으면서 위의 효과들을 볼 수 있고, {{{<tablebordercolor=색깔>}}}을 이용한다면 적절한 테두리 색까지 입힐 수 있게 됩니다.
134[각주]
135== 동영상 ==
136{{{#!wiki style="word-break: keep-all"
137 * '''관련 심화 문법''': [[하트위키:문법 도움말/심화#동영상 심화|매크로를 지원하지 않는 플랫폼의 동영상 삽입]]
138매크로를 이용하여 외부 사이트의 동영상을 첨부할 수 있습니다. 기본적으로 {{{[코드(아이디)]}}} 형식으로 입력합니다.
139||<tablebgcolor=#fff,#2d2f34><rowbgcolor=#00a495><rowcolor=#fff><width=70> 플랫폼 || 입력 || 주소 내 아이디 위치 ||
140|| [[유튜브]] || {{{[youtube(jNQXAC9IVRw)]}}} ||https://www.youtube.com/watch?v={{{#red '''jNQXAC9IVRw'''}}}[br]https://youtu.be/{{{#red '''jNQXAC9IVRw'''}}}||
141|| [[Vimeo]] || {{{[vimeo(584524359)]}}} ||https://vimeo.com/{{{#red '''584524359'''}}} ||
142||<-3> 회색배경은 기타 문법 틀을 이용하여 삽입하므로, 다른 틀에 적용(include)시킬 수 없습니다. ||
143매개변수를 이용해 동영상 속성을 지정할 수 있습니다. 입력 틀은 아래와 같습니다.
144||<tablebgcolor=#fff,#2d2f34><rowbgcolor=#00a495><rowcolor=#fff> 유형 || 입력 || 예시 ||
145|| 단일 매개변수 || {{{[코드(아이디, 매개변수)]}}} ||{{{[youtube(jNQXAC9IVRw, start=8)]}}}||
146|| 매개변수 중첩 || {{{[코드(아이디, 매개변수1, 매개변수2,...)]}}} ||{{{[youtube(jNQXAC9IVRw, width=640, height=360)]}}}||
147매개 변수의 종류는 다음과 같습니다.
126
161127}}}
162128모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다.
163129{{{||<width=숫자>[[파일:example.png|width=100%]]||
......